<template>
	<view class="wshing"
		style="background-image: url('https://ctrlsoft.net.cn/app_static/hesaid//img/wshing/beijing.png');">
		<!-- <Wschildren2 v-if="wshcildren2" @returns='returns' @dmbtn='dmbtn'></Wschildren2> -->
		<view class="center">
			<image v-for="(item,index) in list" :key="index" :src="item.isimg ? item.img : item.img2"
				:class="item.class" @tap="ImgClick(item.id,index)"></image>
		</view>
		<view class="">
			<lff-barrage ref="lffBarrage" :newlistData='listData' :islff="islff"></lff-barrage>
		</view>
		<view class="nvat">
			<image :src="zximg" class="zixun" @click="Consulting"></image>
		</view>

	</view>
</template>

<script>
	import lffBarrage from '@/components/lff-barrage1/lff-barrage1.vue'
	import {
		imgBaseUrl
	} from '../../../utils/baseUrl'
	import {
		busTreviRivershow,
		busTreviFountainshow,
		busTreviFountainwishShow,
	} from '../../../utils/api.js'
	import {
		Wschildren2
	} from './components/wschildren2.vue'

	export default {
		components: {
			Wschildren2,
			lffBarrage,
		},
		data() {
			return {
				islff: true,
				wshchildren: true, //许愿池子组件
				wshcildren2: true, //还愿池子组件
				zximg: imgBaseUrl + '/img/wshing/anniu.png',
				list: [{
					id: '001',
					isimg: 'true',
					img: imgBaseUrl + '/img/wshing/qiujiankang.png',
					img2: imgBaseUrl + '/img/wshing/jiankang2.png',
					class: 'img1'
				}, {
					id: '002',
					isimg: 'true',
					img: imgBaseUrl + '/img/wshing/yinyuan2.png',
					img2: imgBaseUrl + '/img/wshing/yinyuan.png',
					class: 'img2'
				}, {
					id: '003',
					isimg: 'true',
					img: imgBaseUrl + '/img/wshing/shiye.png',
					img2: imgBaseUrl + '/img/wshing/shiye2.png',
					class: 'img3'
				}, {
					id: '004',
					isimg: 'true',
					img: imgBaseUrl + '/img/wshing/caiyun.png',
					img2: imgBaseUrl + '/img/wshing/caiyun2.png',
					class: 'img4'
				}],
				listData: [],
				xyid: '', //许愿图片得id
			}
		},
		async mounted() {
			await this.Data()

			setTimeout(() => {
				this.colrdo()
			}, 500)
		},
		methods: {
			async Data() {
				if (this.islff = 'false') {
					const data = await busTreviFountainwishShow()
					this.listData = data.result
				} else {
					const data = await busTreviFountainwishShow()
					this.listData = data.result
				}
			},
			colrdo() { //插入一条弹幕
				this.$refs.lffBarrage.newadd()
			},
			ImgClick(id, index) {
				if (index == 0) {
					this.list['1'].isimg = true
					this.list['2'].isimg = true
					this.list['3'].isimg = true
				} else if (index == 1) {
					this.list['0'].isimg = true
					this.list['2'].isimg = true
					this.list['3'].isimg = true
				} else if (index == 2) {
					this.list['0'].isimg = true
					this.list['1'].isimg = true
					this.list['3'].isimg = true
				} else if (index == 3) {
					this.list['0'].isimg = true
					this.list['1'].isimg = true
					this.list['2'].isimg = true
				}
				this.list[index].isimg = !this.list[index].isimg
				this.xyid = id
			},
			//跳转到还愿池
			redeem() {
				// this.wshchildren = false;
				// this.wshcildren2 = true;
				this.islff = false;
				this.Data();
				this.colrdo();
			},
			//返回到许愿池
			returns() {
				this.wshcildren2 = false;
				this.wshchildren = true;
			},
			dmbtn() {
				setTimeout(() => {
					this.islff = false;
					this.Data();
					this.colrdo();
				}, 200)
			},
			// 图片渲染
			getImgUrl(image) {
				return imgBaseUrl + image;
			},
			//咨询专家
			Consulting() {
				const index = '3'
				uni.reLaunch({
					url: `../../../pages/tabbar/online/online?id=${index}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.wshing {
		background-repeat: no-repeat;
		background-size: cover;
		background-size: 100%;
		width: 100%;
		height: 100vh;
		filter: brightness(100%);

		.center {
			float: left;
			width: 100%;

			.img1 {
				width: 195rpx;
				height: 40vh;
				margin-left: 19rpx;
				margin-bottom: 77rpx;
			}

			.img2 {
				width: 200rpx;
				height: 40vh;
				margin-left: 7rpx;
				margin-top: 129rpx;
			}

			.img3 {
				width: 188rpx;
				height: 40vh;
				margin-left: 9rpx;
				margin-bottom: 102rpx;
			}

			.img4 {
				width: 129rpx;
				height: 40vh;
				margin-bottom: 74rpx;
				// padding-left: 2rpx;
			}
		}

		.nvat {
			.zixun {
				width: 241rpx;
				height: 279rpx;
				position: absolute;
				right: 0;
				bottom: 183rpx;
				z-index: 10000;
			}
		}

	}
</style>